<template>
	<div>
		<el-row :gutter="16">
			<el-col :span="8">
				<div class="left_content dflex_c">
					<div class="dflex_sb dflex_c" style="width: 80%;" v-loading="leftLoading"
						element-loading-background="rgba(255, 255, 255, 0.8)">
						<div class="detail_left dflex_c dflex_d_c">
							<el-image class="headimg"
								:src="distributionData.fxs_member.member_headimg || 'https://7463-tcb-rflrz31u8yan4rr9ad60d-268679-1308293149.tcb.qcloud.la/1659579992133_0.png'"
								:preview-src-list="distributionData.previewImgs" fit="contain"></el-image>
							<div class="ellipsis_2 left_just">{{ distributionData.fxs_member.member_nickname || '--' }}
							</div>
						</div>
						<div class="detail_right">
							<div class="dflex margin_b_10">
								<div class="detail_title right_just">性别：</div>
								<div>{{ distributionData.fxs_member.member_gender }}</div>
							</div>
							<div class="dflex margin_b_10">
								<div class="detail_title right_just">城市：</div>
								<div>{{ distributionData.fxs_member.member_city || '--' }}</div>
							</div>
							<div class="dflex margin_b_10">
								<div class="detail_title right_just">登录ip：</div>
								<div>{{ distributionData.fxs_member.member_login_current_ip }}</div>
							</div>
							<div class="dflex margin_b_10">
								<div class="detail_title right_just">注册时间：</div>
								<div>{{ distributionData.create_time }}</div>
							</div>
						</div>
					</div>
				</div>
			</el-col>
			<el-col :span="16">
				<div class="right_content dflex_c sele_none">
					<div class="dflex_d_c dflex_c" style="width: 80%;" v-loading="rightLoading"
						element-loading-background="rgba(255, 255, 255, 0.8)">
						<div class="dflex_sb w100">
							<div class="dflex_vertical_c order">
								<div class="circle_txt dflex_c margin_r_20">员</div>
								<div>
									<div class="order_title">成员数量</div>
									<v-countup class="order_data" start-value="0"
										:end-value="distributionData.fxs_member_cnt"></v-countup>
								</div>
							</div>
							<div class="dflex_vertical_c order">
								<div class="circle_txt dflex_c margin_r_20">单</div>
								<div>
									<div class="order_title">成员订单</div>
									<v-countup class="order_data" start-value="0"
										:end-value="distributionData.fxs_order_cnt"></v-countup>
								</div>
							</div>
							<div class="dflex_vertical_c order">
								<div class="circle_txt dflex_c margin_r_20">返</div>
								<div>
									<div class="order_title">已提佣金</div>
									<v-countup class="order_data" start-value="0"
										:end-value="distributionData.fxs_profit_amount" decimals="2"></v-countup>
								</div>
							</div>
						</div>
						<div class="dflex_sb w100 margin_t_25">
							<div class="dflex_vertical_c order">
								<div class="circle_txt dflex_c margin_r_20">提</div>
								<div>
									<div class="order_title">待提佣金</div>
									<v-countup class="order_data" start-value="0"
										:end-value="distributionData.fxs_cashout_amount" decimals="2"></v-countup>
								</div>
							</div>
							<div class="dflex_vertical_c order">
								<div class="circle_txt dflex_c margin_r_20">待</div>
								<div>
									<div class="order_title">待审提现</div>
									<v-countup class="order_data" start-value="0"
										:end-value="distributionData.fxs_unprofit_amount" decimals="2"></v-countup>
								</div>
							</div>
							<div class="dflex_vertical_c order">
								<div class="circle_txt dflex_c margin_r_20">未</div>
								<div>
									<div class="order_title">待结佣金</div>
									<v-countup class="order_data" start-value="0"
										:end-value="distributionData.fxs_unsettled_amount" decimals="2"></v-countup>
								</div>
							</div>
						</div>
					</div>
				</div>
			</el-col>
		</el-row>
		<div class="detail pos_r">
			<el-tabs v-model="tab" @tab-click="cutTabs">
				<el-tab-pane :label="`分销成员 ${totalObj.member_cnt || 0}`" name="member">
					<member v-if="tab == 'member'"></member>
				</el-tab-pane>
				<el-tab-pane :label="`成员订单 ${totalObj.order_cnt || 0}`" name="order">
					<order v-if="tab == 'order'"></order>
				</el-tab-pane>
				<el-tab-pane :label="`提现记录 ${totalObj.withdrawDeposit_cnt || 0}`" name="withdrawDeposit">
					<withdrawDeposit v-if="tab == 'withdrawDeposit'"></withdrawDeposit>
				</el-tab-pane>
				<el-tab-pane :label="`分销记录 ${totalObj.record_cnt || 0}`" name="record">
					<record v-if="tab == 'record'"></record>
				</el-tab-pane>
				<el-tab-pane :label="`日志 ${totalObj.log_cnt || 0}`" name="log">
					<log v-if="tab == 'log'"></log>
				</el-tab-pane>
			</el-tabs>
			<div class="btn pos_a">
				<el-button round icon="el-icon-back" class="return-btn" @click="returnPage">返回</el-button>
			</div>
		</div>
	</div>
</template>

<script>
	import vCountup from 'vue-countupjs';
	import member from './member';
	import order from './order';
	import withdrawDeposit from './withdraw_deposit';
	import record from './record';
	import log from './log';
	const __name = 'wmzmall-distributor, wmzmall-member';
	export default {
		components: {
			vCountup,
			member,
			order,
			withdrawDeposit,
			record,
			log
		},
		data() {
			return {
				leftLoading: false,
				rightLoading: false,
				dataId: '',
				tab: '',
				req: {
					page: 1,
					rows: 10,
					orderby: 'sort asc'
				},
				distributionData: {
					fxs_member: {}
				},
				totalObj: {
					member_cnt: 0,
					order_cnt: 0,
					withdrawDeposit_cnt: 0,
					record_cnt: 0,
					log_cnt: 0
				}
			};
		},
		methods: {
			async loadData() {
				this.leftLoading = true;
				this.rightLoading = true;
				await this.$db[__name].tofirst({
					_id: this.dataId,
					loading: false
				}).then(res => {
					if (res.code == 200) {
						res.datas.fxs_member = res.datas.fxs_member_id[0] || {};

						switch (res.datas.fxs_member.member_gender) {
							case 1:
								res.datas.fxs_member.member_gender = '男';
								break;
							case 2:
								res.datas.fxs_member.member_gender = '女';
								break;
							default:
								res.datas.fxs_member.member_gender = '未知';
								break;
						}

						res.datas.previewImgs = [(res.datas.fxs_member.member_headimg && res.datas.fxs_member
							.member_headimg.replace("/132", "/0")) ||
							'https://7463-tcb-rflrz31u8yan4rr9ad60d-268679-1308293149.tcb.qcloud.la/1659579992133_0.png'
						];
						res.datas.create_time = new Date(res.datas.create_time).format();
						res.datas.fxs_profit_amount = res.datas.fxs_profit_amount / 100;
						res.datas.fxs_cashout_amount = res.datas.fxs_cashout_amount / 100;
						res.datas.fxs_unprofit_amount = res.datas.fxs_unprofit_amount / 100;
						res.datas.fxs_unsettled_amount = res.datas.fxs_unsettled_amount / 100;
						this.distributionData = res.datas;
					}
					this.leftLoading = false;
					this.rightLoading = false;
				});
				const totalDatas = await this.$udb.multiSend(
					this.$db['wmzmall-member']
					.collection()
					.where({
						myfxs_uid: this.dataId
					})
					.field('_id')
					.getTemp(),
					this.$db['wmzmall-order']
					.collection()
					.where(`(order_fxs_uid == '${this.dataId}' || order_fxs_uid2 == '${this.dataId}') && is_fxs == '是' && order_pay_state == '已付款'`)
					.field('_id')
					.getTemp(),
					this.$db['wmzmall-distributor-cashout']
					.collection()
					.where({
						fxs_uid: this.dataId
					})
					.field('_id')
					.getTemp(),
					this.$db['wmzmall-distributor-record']
					.collection()
					.where({
						fxs_uid: this.dataId
					})
					.field('_id')
					.getTemp(),
					this.$db['wmzmall-distributor-log']
					.collection()
					.where({
						fxs_uid: this.dataId
					})
					.field('_id')
					.getTemp()
				);

				this.totalObj.member_cnt = totalDatas.result.dataList[0].affectedDocs;
				this.totalObj.order_cnt = totalDatas.result.dataList[1].affectedDocs;
				this.totalObj.withdrawDeposit_cnt = totalDatas.result.dataList[2].affectedDocs;
				this.totalObj.record_cnt = totalDatas.result.dataList[3].affectedDocs;
				this.totalObj.log_cnt = totalDatas.result.dataList[4].affectedDocs;
			},
			cutTabs(res) {
				uni.setStorage({
					key: '__tabs' + this.$route.path,
					data: res.name
				});
			},
			returnPage() {
				uni.$emit('closeTab');
				uni.redirectTo({
					url: '/pages/distribution/list/distribution_list'
				});
			}
		},
		created() {
			this.dataId = this.$route.query.id || '';
			this.loadData();
		},
		mounted() {
			this.tab = uni.getStorageSync('__tabs' + this.$route.path) || 'member';
		}
	};
</script>

<style>
	.left_content,
	.right_content {
		background-color: #fff;
		height: 200px;
		border-radius: 10px;
	}

	.detail_left {
		margin: 0 80px 0 0;
	}

	.detail_title {
		color: #8a8a8a;
		width: 8.125rem;
		user-select: none;
	}

	.order {
		width: 320px;
		cursor: pointer;
	}

	.circle_txt {
		font-size: 24px;
		color: #fff;
		width: 56px;
		height: 56px;
		border-radius: 50%;
		background-color: #ff6b6b;
		transition: transform 0.2s;
	}

	.order:hover .circle_txt {
		transform: scale(1.1);
	}

	.order_title {
		font-size: 14px;
	}

	.order_data {
		font-size: 28px;
	}

	.detail .btn {
		transform: translate(-0, -50%);
		top: 50%;
		right: 0;
	}

	.ellipsis_2 {
		max-width: 100px;
	}
</style>
